<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link href="/resources/css/global-style.css" rel="stylesheet">
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body {
			font-family:"나눔고딕",NanumGothic,"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
			font-size:14px;
			line-height:1.428571429;
			color:#333;
			background-image: url("/resources/img/bg.gif");
			padding-bottom: 35px;
		}
	   	#login-dialog { max-width: 350px; margin: 25px auto; }
	   	#recovery-execute{ display: none; }
	   	.alert{
			width:90%;
			position: fixed;
			z-index: 1300;
			left: 5%;
			top:-55px;
			display:none;
		}
    </style>
</head>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script type="text/javascript">
		
	function alertShow(type, message, dealy){
		var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button><strong>"+message+"</strong></div>");
		$("body").append($el);
		if(dealy != null){
			setTimeout(function(){$el.addClass("in");},100);
			setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
		}
	}
	function alertHide(el){
		var $el = $(el).parent();
		$el.removeClass("in");
		setTimeout(function(){$el.remove();},300);
	}
	
	function recoveryCancel(){
		$("#modal-recovery").hide('slide',{'direction':'down'},500,function(){
			$("#modal-login").fadeIn();
			$("#recovery-step").hide();
			$("#recovery-execute").hide();
		});
	}
	
	function recoveryPasswd(obj){
		$.ajax({
		    type : "POST"
		    , url : "/recoveryPasswd?email="+$("#InputRecoveryEmail").val()
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alertShow("danger","다시 시도해주세요", 2000);
		    	$(obj).html("전송").removeAttr("disabled","disabled");
		    }
		    , success : function(response) {
		    	if(response == "execute"){
		    		$("#recovery-step").hide();
		    		$(".recovery-execute-message").html("<p><strong>"+$("#InputRecoveryEmail").val()+"</strong> 이메일로 비밀번호 찾기 URL주소를 전송하였습니다.<br>이메일을 확인해 주세요</p>");
		    		$("#recovery-execute").show();
		    	}else{
		    		alertShow("danger","등록되지 않은 이메일입니다", 2000);
		    	}
		    }
		    , beforeSend: function() {
		    	$(obj).html("전송중..").attr("disabled","disabled");
		    }
		    , complete: function() {
		    	$(obj).html("전송").removeAttr("disabled","disabled");
		    }
		});
	}
</script>
<body>
<div class="container" style="margin-top: 15px;">
	<div id="login-dialog">
		<div style="background-color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);">
			<div>
				<div style="padding: 15px;">
		        	<button type="button" onclick="location.href='home.html';" class="close" style="font-size: 28px;">×</button>
		        	<h4 class="modal-title"><spring:message code="head.login.forgotpw"/></h4>
				</div>
				<div style="padding: 15px;" id="recovery-step">
					<p>가입시 등록한 이메일 주소를 입력해주세요</p>
					<input type="text" class="form-control" id="InputRecoveryEmail" name="InputRecoveryEmail" placeholder="이메일" title="이메일" tabindex="1" autofocus="autofocus" style="margin-bottom: 25px;">
					<div style="text-align: right;">
						<button type="button" class="btn btn-primary" onclick="recoveryPasswd(this);">전송</button>
						<button type="button" class="btn btn-default" onclick="location.href='home.html';">취소</button>
					</div>
				</div>
				<div style="padding: 15px;" id="recovery-execute">
					<div class="recovery-execute-message"></div>
					<div style="text-align: center;"><button type="button" class="btn btn-success btn-block" onclick="location.href='home.html';">확인</button></div>
				</div>
			</div>
		</div>
	</div>
</div>
<form id="kakao-form" method="post" action="/kakaoLogin">
	<input type="hidden" id="kakao-idx" name="kakao-idx" value="">
	<input type="hidden" id="kakao-nickname" name="kakao-nickname" value="">
	<input type="hidden" id="kakao-profile_image" name="kakao-profile_image" value="">
</form>

</body>
</html>